import React, { Component } from 'react';
import { Table, Select, Anchor } from '@knownsec/react-component';
import { getsite } from '~/API';
import {
  taskSysParams,
  childInfo,
  httpFunction,
  ipStatus,
  outService,
  systemInfo,
  webApp,
} from '../columns';
import {
  ipStatusData,
  systemInfoData,
  webAppData,
} from '../emptydata';
import s from './style.module.less';
import EmptyData from '../../../../components/EmptyData';

const { Link } = Anchor;
class Info extends Component {
  constructor(props) {
    super(props);
    this.caleData = [
      { grade: '严重', explain: '分置加权，加权后大于75分为：严重' },
      { grade: '高危', explain: '分置加权，大于50分且小于等于75分为：高危' },
      { grade: '中危', explain: '分置加权，大于25分且小于等于50分为：中危' },
      { grade: '低危', explain: '分置加权，大于0且小于等于25分为：低危' },
      { grade: '安全', explain: '分置加权，等于0分为：安全' },
    ];
    this.state = {
      allData: {},
      taskInfo: {},
      httpData: [],
      loading: false,
    };
  }
  componentDidMount() {
    this.getData();
  }
  getData(){
    if (this.props?.fetchable === 'fail') return false
    this.setState({ loading: true });
    getsite(this.props.targetId).then(res =>{
      if(res.status === 'success'){
        const data = res.data?.detail || {}
        const task = {
          title: data.basic_info?.title || '-',
          city_name: data.ipdb?.city_name || '-',
          port: data.port?.ip || '-',
          icp: data.icp?.desc || '-',
          endDate: '暂无',
          alexa: (data.alexa || data.alexa == 0) ? data.alexa : '-',
          waf_list: data?.waf_list?.length? data.waf_list.join() : '暂无',
        }
        const httpArr=['HEAD','GET','OPTIONS','TRACE','POST','PUT','DELETE']
        const http_method=data?.http_method?.split(',')
        const httpdata =httpArr.map((item,i)=>{
            if(http_method.includes(item)){
                if(i<=2){
                    return {type:item,pingres:'安全（开启)'}
                }
            return {type:item,pingres:'危险（开启)'}
            }
            return {type:item,pingres:'安全（关闭)'}
        })
        // const httpdata = data?.http_method?.split(',').filter(i=>i).map(item => {return { scanType: item }}) || []
        this.setState({taskInfo: task, allData: data, httpData: httpdata, loading: false})
      } else {
        const task = {
            title: '-',
            city_name: '-',
            port: '-',
            icp: '-',
            endDate: '暂无',
            alexa: '-',
            waf_list: '暂无',
        }
        this.setState({taskInfo: task, allData: {}, httpData: [], loading: false})
      }
    }).catch(_ => {
        const task = {
            title: '-',
            city_name: '-',
            port: '-',
            icp: '-',
            endDate: '暂无',
            alexa: '-',
            waf_list: '暂无',
        }
        this.setState({taskInfo: task, allData: {}, httpData: [], loading: false})
    })
  }
  handleAnchorClick = (e) => {
    e.preventDefault();
  };
  render() {
    return (
      <div className={s.wangInfo}>
        <Anchor
          className={s.anchoritem}
          onClick={this.handleAnchorClick}
          getContainer={() => document.getElementById('info')}
        >
          <Link href="#system-info" title="业务系统信息" />
          <Link href="#http-function" title="HTTP方法" />
          <Link href="#out-service" title="对外开放服务" />
          <Link href="#child-info" title="子域名信息" />
          {/* <Link href="#ip-status" title="IPv4/IPv6状态" /> */}
          {/* <Link href="#op-info" title="操作系统信息" /> */}
          {/* <Link href="#web-app" title="Web应用指纹" /> */}
        </Anchor>
        <div id="info" className={s.wo}>
          <div id="system-info" className={s.title}>
            业务系统信息
          </div>
          <div className={s.itemflex}>
            {taskSysParams.map((item) => {
              return (
                <div className={s.wrapflex}>
                  {item.name}：{this.state.taskInfo[item.key]}
                </div>
              );
            })}
          </div>
          <div id="http-function" className={s.title}>
            HTTP方法
          </div>
          <Table 
            columns={httpFunction} 
            tableLoading={this.state.loading}
            loadingLabel=""
            empty={this.props?.fetchable === 'fail' && <EmptyData text='未开启该监测项'/>}
            data={this.state.httpData}></Table>
          <div id="out-service" className={s.title}>
            对外开放服务 {this.state.allData?.port?.data?.length? '('+this.state.allData?.port?.data?.length+')' : null}
          </div>
          <Table 
            empty={(<div style={{padding: '20px',textAlign: 'center', fontSize: 14, color: '#2A2B31'}}>没有检测出端口信息</div>)} 
            columns={outService} 
            tableLoading={this.state.loading}
            loadingLabel=""
            data={this.state.allData?.port?.data || []}></Table>
          <div id="child-info" className={s.title}>
            子域名信息 {this.state.allData?.subdomain?.length? '('+this.state.allData?.subdomain?.length+')' : null}
          </div>
          <Table 
            columns={childInfo} 
            tableLoading={this.state.loading}
            empty={this.props?.fetchable === 'fail' && <EmptyData text='未开启该监测项'/>}
            loadingLabel=""
            data={this.state.allData?.subdomain || []}></Table>
          {/* <div id="ip-status" className={s.title}>
            IPv4/IPv6状态 {ipStatusData?.length? '('+ipStatusData.length+')' : null}
          </div>
          <Table columns={ipStatus} data={ipStatusData}></Table> */}
          {/*<div id="op-info" className={s.title}>
            操作系统信息
          </div>
          <Table columns={systemInfo} data={systemInfoData}></Table>
           <div id="web-app" className={s.title}>
            Web应用指纹 {webAppData?.length? '('+webAppData?.length+')' : null}
          </div>
          <Table columns={webApp} data={webAppData}></Table> */}
        </div>
      </div>
    );
  }
}

export default Info;
